<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import Header from '../components/Header.vue'
import Announcement from '../components/Announcement.vue'

// 用户数据
const userData = ref({
    name: '张文聪'
})

// 选中的分类
const selectedCategory = ref('all')

// 分类列表
const categories = ref([
    { id: 'all', name: '所有工具', icon: 'fas fa-th' },
    { id: 'dev', name: '开发工具', icon: 'fas fa-code' },
    { id: 'data', name: '数据分析', icon: 'fas fa-chart-bar' },
    { id: 'image', name: '图片处理', icon: 'fas fa-image' },
    { id: 'doc', name: '文档工具', icon: 'fas fa-file-alt' },
    { id: 'db', name: '数据库工具', icon: 'fas fa-database' }
])

// 工具列表
const tools = ref([
    {
        id: 1,
        name: 'JSON格式化',
        description: '格式化、验证和压缩JSON数据，使JSON更易于阅读和调试。',
        icon: 'fas fa-json',
        category: 'dev',
        rating: 4.8,
        downloads: 2453,
        lastUsed: '2小时前',
        isFavorite: true,
        gradient: 'from-blue-500 to-blue-400'
    },
    {
        id: 2,
        name: 'Base64编码',
        description: '将文本或文件进行Base64编码和解码，支持多种数据格式。',
        icon: 'fas fa-baseball-ball',
        category: 'dev',
        rating: 4.6,
        downloads: 1876,
        lastUsed: '1天前',
        isFavorite: true,
        gradient: 'from-green-500 to-green-400'
    },
    {
        id: 3,
        name: '正则测试',
        description: '测试和调试正则表达式，高亮显示匹配结果，支持多种编程语言语法。',
        icon: 'fas fa-code',
        category: 'dev',
        rating: 4.9,
        downloads: 3210,
        lastUsed: '3天前',
        isFavorite: true,
        gradient: 'from-purple-500 to-purple-400'
    },
    {
        id: 4,
        name: '哈希生成',
        description: '生成MD5、SHA1、SHA256等哈希值，用于数据完整性验证。',
        icon: 'fas fa-key',
        category: 'dev',
        rating: 4.5,
        downloads: 1289,
        lastUsed: '1周前',
        isFavorite: false,
        gradient: 'from-red-500 to-red-400'
    },
    {
        id: 5,
        name: '时间戳转换',
        description: '在时间戳和可读日期格式之间进行转换，支持多种编程语言格式。',
        icon: 'fas fa-calendar-alt',
        category: 'dev',
        rating: 4.7,
        downloads: 982,
        lastUsed: '5天前',
        isFavorite: false,
        gradient: 'from-yellow-500 to-yellow-400'
    },
    {
        id: 6,
        name: '二维码生成',
        description: '生成自定义样式和颜色的二维码，支持文本、URL和联系方式。',
        icon: 'fas fa-qrcode',
        category: 'image',
        rating: 4.8,
        downloads: 1567,
        lastUsed: '2周前',
        isFavorite: false,
        gradient: 'from-indigo-500 to-indigo-400'
    }
])

// 最近使用的工具
const recentTools = computed(() => {
    return tools.value
        .filter(tool => tool.lastUsed)
        .sort((a, b) => {
            // 简单按时间排序（实际应用中应该使用时间戳）
            if (a.lastUsed.includes('小时') && !b.lastUsed.includes('小时')) return -1
            if (!a.lastUsed.includes('小时') && b.lastUsed.includes('小时')) return 1
            return 0
        })
        .slice(0, 3)
})

// 常用工具
const favoriteTools = computed(() => {
    return tools.value.filter(tool => tool.isFavorite)
})

// 过滤后的工具列表
const filteredTools = computed(() => {
    let result = tools.value

    // 按分类过滤
    if (selectedCategory.value !== 'all') {
        result = result.filter(tool => tool.category === selectedCategory.value)
    }

    return result
})

// 选择分类
const selectCategory = (categoryId) => {
    selectedCategory.value = categoryId
    ElMessage.success(`已选择分类: ${categories.value.find(c => c.id === categoryId).name}`)
}

// 打开工具
const openTool = (tool) => {
    ElNotification({
        title: '打开工具',
        message: `正在启动: ${tool.name}`,
        type: 'success',
        position: 'bottom-right'
    })
}
</script>

<template>
    <div class="min-h-screen bg-gray-50 text-gray-800 flex flex-col">
        <!-- 引用 Header 组件 -->
        <Header :user="userData" />

        <!-- 主内容区域 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 引用公共公告组件 -->
            <Announcement />

            <div class="flex flex-col lg:flex-row gap-6">
                <!-- 侧边栏 -->
                <aside class="w-full lg:w-72 flex-shrink-0">
                    <!-- 分类 -->
                    <el-card class="mb-6 rounded-xl" shadow="hover">
                        <template #header>
                            <div class="font-semibold text-lg">工具分类</div>
                        </template>
                        <ul class="space-y-2">
                            <li v-for="category in categories" :key="category.id" :class="['flex-1 items-center space-x-3 p-3 rounded-lg cursor-pointer transition-all',
                                selectedCategory === category.id ? 'bg-cyan-50 text-sky-300' : 'hover:bg-blue-300']"
                                @click="selectCategory(category.id)">
                                <i :class="[category.icon, 'w-5 text-center']"></i>
                                <span>{{ category.name }}</span>
                            </li>
                        </ul>
                    </el-card>

                    <!-- 最近使用 -->
                    <el-card class="rounded-xl" shadow="hover">
                        <template #header>
                            <div class="font-semibold text-lg">最近使用</div>
                        </template>
                        <ul class="space-y-3">
                            <li v-for="tool in recentTools" :key="tool.id"
                                class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer transition-all"
                                @click="openTool(tool)">
                                <i :class="[tool.icon, 'text-purple-500']"></i>
                                <span>{{ tool.name }}</span>
                            </li>
                        </ul>
                    </el-card>
                </aside>

                <!-- 内容区域 -->
                <div class="flex-1">
                    <!-- 常用工具区域 -->
                    <section class="mb-8">
                        <div class="flex justify-between items-center mb-5">
                            <h2 class="text-2xl font-bold text-dark">常用工具</h2>
                            <el-button type="primary" link>
                                查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
                            </el-button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <el-card v-for="tool in favoriteTools" :key="tool.id"
                                class="rounded-xl overflow-hidden transition-all cursor-pointer tool-card"
                                shadow="hover" :body-style="{ padding: 0 }" @click="openTool(tool)">
                                <div :class="`bg-gradient-to-r ${tool.gradient} p-5 flex items-center`">
                                    <div
                                        class="w-12 h-12 rounded-xl bg-cyan-50 flex items-center justify-center text-white text-xl">
                                        <i :class="tool.icon"></i>
                                    </div>
                                    <h3 class="text-white font-semibold ml-4">{{ tool.name }}</h3>
                                </div>
                                <div class="p-5">
                                    <p class="text-gray-600 text-sm mb-4">{{ tool.description }}</p>
                                    <div class="flex justify-between text-xs text-gray-500">
                                        <div class="flex items-center">
                                            <i class="far fa-star mr-1"></i>
                                            <span>{{ tool.rating }}</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="far fa-clock mr-1"></i>
                                            <span>最近使用: {{ tool.lastUsed }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </section>

                    <!-- 所有工具区域 -->
                    <section>
                        <div class="flex justify-between items-center mb-5">
                            <h2 class="text-2xl font-bold text-dark">所有工具</h2>
                            <el-button type="primary" link>
                                查看全部 <i class="fas fa-chevron-right ml-1 text-xs"></i>
                            </el-button>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
                            <el-card v-for="tool in filteredTools" :key="tool.id"
                                class="rounded-xl overflow-hidden transition-all cursor-pointer tool-card"
                                shadow="hover" :body-style="{ padding: 0 }" @click="openTool(tool)">
                                <div :class="`bg-gradient-to-r ${tool.gradient} p-5 flex items-center`">
                                    <div
                                        class="w-12 h-12 rounded-xl bg-white/20 flex items-center justify-center text-white text-xl">
                                        <i :class="tool.icon"></i>
                                    </div>
                                    <h3 class="text-white font-semibold ml-4">{{ tool.name }}</h3>
                                </div>
                                <div class="p-5">
                                    <p class="text-gray-600 text-sm mb-4">{{ tool.description }}</p>
                                    <div class="flex justify-between text-xs text-gray-500">
                                        <div class="flex items-center">
                                            <i class="far fa-star mr-1"></i>
                                            <span>{{ tool.rating }}</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fas fa-download mr-1"></i>
                                            <span>{{ tool.downloads }}</span>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </section>
                </div>
            </div>
        </main>
    </div>
</template>

<style scoped>
.tool-card {
    transition: all 0.3s ease;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}
</style>